<template>
  <div>
    <van-nav-bar
        left-arrow
        title="服务信息"
        @click-left="onClickLeft"
    />

    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="image in carOrder.skuImages">
          <img :src="image.imgUrl" alt="" style="width: 100%;height: 400px">
        </van-swipe-item>
      </van-swipe>

      <div style="padding-left: 15px;">
        <p style="font-size: 25px;">{{ carOrder.name }}</p>
        <span style="font-size: 12px;">{{ carOrder.introduce }}</span>
      </div>
      <br>
      <br>
      <div style="padding-left: 15px;">
        <p style="font-size: 20px;">服务流程</p>
        <br>
        <div style="width: 87%;border: 2px dashed #000;padding: 20px;border-radius: 10px;">
          <el-steps :active="activeStep" finish-status="success" align-center>
            <el-step title="下单支付" icon="el-icon-s-claim"></el-step>
            <el-step title="获取券码" icon="el-icon-s-ticket"></el-step>
            <el-step title="在线预约" icon="el-icon-phone"></el-step>
            <el-step title="到店服务" icon="el-icon-s-shop"></el-step>
          </el-steps>
        </div>
      </div>
      <br>
      <br>
      <van-field
          readonly
          v-model="couponList[active].couponName"
          placeholder="请选择优惠券"
          :extra="couponList[active].amount"
      >
        <div slot="extra">
          <span>${{ couponList[active].amount }}</span>
        </div>
      </van-field>
      <br>
      <van-submit-bar
          button-text="提交订单"
          tip-icon="info-o"
          @submit="onSubmit"
      >
        <div style="display: flex;justify-content: space-between;">
          <van-dropdown-menu direction="up">
            <van-dropdown-item v-model="active" @change="aaa" :options="showList" title="选择优惠卷"/>
          </van-dropdown-menu>
        </div>
        <div>
          <span style="color: red;font-size: 22px;">￥{{ onPrice() }} </span><span
            style="border: 1px red double;font-size: 12px;color: red;">券后价</span>
          <br>
          <span style="color: #999;font-size: 12px;">门市价￥{{ carOrder.price }}</span>
        </div>
      </van-submit-bar>
      <!--      <div class="bu" style="position: relative;margin-top: 45px;margin-right: 10px">-->
      <!--        <div>-->
      <!--          <span-->
      <!--              style="position: absolute;bottom: 0;right: 150px;font-weight: bold;color: red;margin-bottom: 25px;margin-right: 15px">￥11 <span-->
      <!--              style="font-size: 10px;position: absolute;bottom: 0;right: -35px;border: 1px red double">卷后价</span></span>-->
      <!--          <span-->
      <!--              style="position: absolute;bottom: 0;right: 133px;font-weight: bold;color: red;font-size: 12px">门市价￥{{ carOrder.price }}</span>-->
      <!--        </div>-->
      <!--        <van-button round type="success"-->
      <!--                    style="width: 120px;background-color: #de3548;border: 0;color: white;position: absolute;bottom: 0;right: 0;">-->
      <!--          去结算-->
      <!--        </van-button>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script>
import {findCoupon, findSkuById} from "@/api/category/category";
import {findUserById} from "@/api/wode/user";

export default {
  data() {
    return {
      carOrder: {},
      active: 0,
      total: 4,
      showList: [],
      couponList: [],
      price: '',
      user: {},
      orderInfo: {}
    }
  },
  methods: {
    onSubmit() {
      //生成随机订单号
      // 生成一个随机数
      this.orderInfo.orderName = this.carOrder.name
      this.orderInfo.price = this.carOrder.price
      this.orderInfo.userId = this.user.id
      this.orderInfo.discount = this.couponList[this.active].amount
      this.orderInfo.photo = this.carOrder.skuImages[0].imgUrl
      this.$router.push({path: '/OrderPrice', query: this.orderInfo})
      // this.$router.push({path:'/OrderPrice',query:{orderInfo:this.orderInfo}})
    },
    onPrice() {
      this.price = this.carOrder.price - this.couponList[this.active].amount
      return this.carOrder.price - this.couponList[this.active].amount
    },
    aaa(index) {
      this.active = index
    },
    findCouponList() {
      findCoupon().then(res => {
        this.couponList = res.data
        res.data.forEach((item, index) => {
          this.showList.push({
            text: item.couponName,
            value: index
          })
        })
      })
    },
    findSkuById() {
      findSkuById(this.$route.query.id).then(res => {
        this.carOrder = res
      }).catch(error => {
        console.log(error)
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    findUserById() {
      findUserById(localStorage.getItem('token')).then(res => {
        if (res.code == 208){
          this.$message.warning(res.message)
          localStorage.removeItem('token')
          this.$router.push('/')
        }
        this.user = res.data

      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted() {
    this.findSkuById()
    this.findCouponList()
  },
  created() {
    this.findUserById()
  }
}
</script>

<style>
.el-step__title {
  font-size: 12px;
}
</style>
